<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/include/taglib.jsp" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>homepage</title>
</head>
<body>
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }

    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">JL</a>
        </li>
        <li class="active">战队介绍</li>
    </ul>
</div>
<div class="page-content">
    <h1>战队介绍</h1>
    <%--======================================================--%>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;text-decoration:none;}
        body{font:12px/180% Arial;}
        .brand a{
            display: block;
            float: left;
            margin: 20px;
            width: 180px;
            height: 240px;
            text-align: center;
            position: relative;
        }
        .brand img{
            width: 180px;
            height: 240px;
        }
        .brand .info{
            display: none;
            background-color: #f0f0f0;
            color: #369242;
        }
        .vertical .info{
            width: 0;
            height: 240px;
            margin: 0 auto;
        }
        .horizontal img{
            position: absolute;
            top: 0;
            left: 0;
        }
        .horizontal .info{
            width: 180px;
            height: 0;
            top: 120px;
            position: absolute;
            left: 0;
        }
    </style>

    <div style="width:720px;margin:0 auto;">

        <div id="horizontal" class="brand horizontal">
            <a target="_blank" href="#"><img alt="" src="${ctx}/static/images/1.jpg" /><div class="info">徐斌斌</div></a>
            <a target="_blank" href="#"><img alt="" src="${ctx}/static/images/1.jpg" /><div class="info">XXX</div></a>
            <a target="_blank" href="#"><img alt="" src="${ctx}/static/images/1.jpg" /><div class="info">XXX</div></a>
        </div>

    </div>

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        //品牌翻转
        var turn = function(target,time,opts){
            target.find('a').hover(function(){
                $(this).find('img').stop().animate(opts[0],time,function(){
                    $(this).hide().next().show();
                    $(this).next().animate(opts[1],time);
                });
            },function(){
                $(this).find('.info').animate(opts[0],time,function(){
                    $(this).hide().prev().show();
                    $(this).prev().animate(opts[1],time);
                });
            });
        }
        var verticalOpts = [{'width':0},{'width':'180px'}];
        turn($('#vertical'),100,verticalOpts);
        var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}];
        turn($('#horizontal'),100,horizontalOpts);
    </script>
    <div align="center" style="clear:both;font-size:12px;color:#666;">
        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
            <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
            <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
        </div>
    </div>
    <%--======================================================--%>
</div>

</body>
</html>




